<%@ page language="java" import="java.util.*,com.chj.entity.*, com.chj.constants.Constants" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">

    <title>选择车位界面</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <!-- css/evtcar.css -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="css/easyui/themes/default/easyui.css" />
    <link type="text/css" rel="stylesheet" href="css/evtcar.css" />
    <link type="text/css" rel="stylesheet" href="css/person/userInf.css" />
    <link type="text/css" rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="css/demo.css"   />
    <link type="text/css" rel="stylesheet" href="css/easyui/themes/icon.css">

    <!-- 导入JS -->
    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/jquery/1.6/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/easyui/1.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui/1.4/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/staticinfo.js"></script>


  </head>

  <body>
    <!--顶部导航栏开始 -->
    <%@include file="head.jsp"%>
    <!--下面是中部导航栏的代码-->
    <div class="nav-green nav-head" id="J_m_nav">
        <div class="nav-content">
            <div class="nav-btn"><a href="index.do">首页</a></div>
            <div class="nav-btn active"><a href="ecarcharge/we_need_charge.do">我要充电</a></div>
            <div class="nav-btn"><a href="person/person_center.do">个人中心</a></div>
            <div class="nav-btn"><a href="about_me.do">关于我们</a></div>
            <div class="nav-btn"><a href="person/person_help.do">用户帮助</a></div>
        </div>
    </div>
    </header>
<div class="main">
    <div class="newcontainer">
        <div id="user-card">
            <div class="inners clearfix without-side">
                <div class="content function" style="width: 1024px; margin: 0px auto; font-size: 23px;">
                    <p>网点名称：${netWork.networkName}</p>
                    <p>网点地址：${netWork.networkProvince}${netWork.networkCity}${netWork.networkArea}${netWork.networkAddress}</p>
                    <p>网点车位数量：${netWork.networkParkSize}(个)</p>
                    <p>营业起止时间：${netWork.networkTimeBegin} - ${netWork.networkTimeEnd} </p>
                    <br/>
                    <p>充电时间段:
                     <input id="chargeTimeBegin" type="text" class="easyui-datetimebox" style="width: 150px;" disabled="disabled"/>
                     - 
                     <input id="chargeTimeEnd" type="text" class="easyui-datetimebox"  style="width: 150px;" disabled="disabled"/>
                </div>
                </div>
            </div>
        </div>
        <div id="myecar" style="width: 1170px;margin: 0 auto;">
            <div class="title">车位信息
                </div>
                <div class="inf">
                    <div class="containbox">
                        <div class="bar">
                            <div role="tabpanel">
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="neworder">
                                        <table class="table table-striped" >
                                        <tr>
                                            <th style="display:none;">电动车位Id</th>
                                            <th>电动车位名称</th>
                                            <th>电动车位大小</th>
                                            <th>电动车位单价</th>
                                            <th>电动车位状态</th>
                                        </tr>
                                        <tr align="center">
                                            <td style="display:none;">${park.parkId}</td>
                                            <td>${park.parkName}</td>
                                            <td>${park.parkSize}</td>
                                            <td>${park.parkPrice}</td>
                                            <td>等待充电中</td>
                                        </tr>
                                        </table>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
        </div>
        <div class="tab-content" style="width: 1170px;margin: 0 auto;">
        <div class="title">选择电动车
        </div>
                                    <div role="tabpanel" class="tab-pane active" id="neworder">
                                        <table class="table table-striped" id="newOrderContent">
                                        <tr>
                                            <th>
                                                电动汽车Id
                                            </th>
                                            <th>
                                                电动汽车名字
                                            </th>
                                            <th>
                                                电动汽车充电时间
                                            </th>
                                            <th>
                                                电动汽车描述
                                            </th>
                                            <th>
                                                电动汽车类型
                                            </th>
                                            <th>当前电动汽车状态</th>
                                            <th>
                                                操作
                                            </th>
                                        </tr>
                                        </table>
                                    </div>

                                    <div role="tabpanel" class="tab-pane" id="oldorder">
                                        <table class="table table-striped" id="oldOrderContent">
                                            <tr>
                                                <td class="t"><span>*</span>电动车车牌：</td>
                                                <td><input type="text" id="ecarId" value="" autocomplete="off"></td>
                                            </tr>
                                            <tr>
                                                <td class="t"><span>*</span>电动车名称：</td>
                                                <td><input type="text" id="ecarName" value="" autocomplete="off"></td>
                                            </tr>
                                            <tr>
                                                <td class="t"><span>*</span>电动车充电时间：</td>
                                                <td><input type="text" id="ecarTime" value="" autocomplete="off"></td>
                                            </tr>
                                            <tr>
                                                <td class="t">电动汽车类型：</td>
                                                <td>
                                                <!-- 下拉框 -->
                                                <input type="text" id="ecarType" value="" autocomplete="off"></td>
                                            </tr>
                                            <tr>
                                                <td class="t">电动汽车描述</td>
                                                <td><textarea rows="3" cols="50" type="text" id="ecarDescription" value="" autocomplete="off"></textarea></td>
                                            </tr>
                                            <tr>
                                                <td class="t">
                                                    &nbsp;
                                                </td>
                                                <td>
                                                    <input type="submit" id="saveecar" style="background: -webkit-linear-gradient(#75abda,#6698c9);width: 68px;  height: 34px;color: #fff;" value="保存信息">
                                                    <span id="SaveOkMsg" style="display: none;"> 你的资料保存成功！ </span>
                                                </td>
                                            </tr>
                                            
                                        </table>
                                    </div>
                                </div>
    </div>
</div>
<div style="width: 100px;height: 100px;"></div>
    <%@include file="footer.jsp"%>
  </body>
<script type="text/javascript">
var date = new Date();

var begintime =  '${chargeTimeBegin}';
var endtime   =  '${chargeTimeEnd}';

$('#chargeTimeBegin').datetimebox({
    value: begintime ,
    required: true
});

$('#chargeTimeEnd').datetimebox({
    value: endtime ,
    required: true
});

$(function(){
    var eCarModelList = ${eCarModelList};

    $.each(eCarModelList, function(i, content){
        var html  = '<tr align="center">';
            html += '<td>'+eCarModelList[i].eCar.ecarId+'</td>';
            html += '<td>'+eCarModelList[i].eCar.ecarName+'</td>';
            html += '<td>'+eCarModelList[i].eCar.ecarTime+'（小时）</td>';
            html += '<td>'+eCarModelList[i].eCar.ecarDescription+'</td>';
            if (eCarModelList[i].eCar.ecarType == 1) {
                html += '<td>普通</td>';
            } else {
                html += '<td>特殊</td>';
            }
            html += '<td>'+eCarModelList[i].eCarStatu+'</td>';
            var ecarPk = eCarModelList[i].eCar.ecarPk;
            if ( eCarModelList[i].eCarStatu == '空闲中') {
                 html += "<td><button class=\"btn btn-primary\" onclick=\"add_order("+"'"+ecarPk+"'"+")\">进行充电</button></td>";
            } else {
            	html += "<td></td>"
            }
            html += '</tr>';
        $("#newOrderContent").append(html);
    });
    
    if (eCarModelList.length == 0 ) {
    	var html  = '<tr align="center">';
            html += '<td colspan="6" style="font-size:25px;">无可用充电汽车，请先去个人中心添加汽车</td>';
            html += '</tr>';
        $("#newOrderContent").append(html);
    }
});

function add_order(ecarPk){

	var begintime =  '${chargeTimeBegin}';
    var endtime   =  '${chargeTimeEnd}';
    var networkId = '${netWork.networkId}'
    var parkId    =  '${park.parkId}';
    
    window.location.href = 'ecarcharge/create_order.do?ecarId='+ecarPk+'&parkId='+parkId+'&networkId='+networkId+'&chargeTimeBegin='+begintime+'&chargeTimeEnd='+endtime+'';
   
    
}

</script>
</html>
